<template>
	<div class="app-container">
		<el-descriptions title="订单详情" :column="4" border>
			<el-descriptions-item label="订单号" label-class-name="my-label">{{ orderDetail.orderNumber
				}}</el-descriptions-item>
			<el-descriptions-item label="运费" label-class-name="my-label">{{ orderDetail.amountDelivery
				}}</el-descriptions-item>
			<el-descriptions-item label="订单来源" label-class-name="my-label">{{ orderDetail.orderSource
				}}</el-descriptions-item>
			<el-descriptions-item label="交期天数" label-class-name="my-label">{{ orderDetail.deliveryDay
				}}</el-descriptions-item>
			<el-descriptions-item label="理赔金额" label-class-name="my-label">{{ orderDetail.amountCompensate
				}}</el-descriptions-item>
			<el-descriptions-item label="是否加急" label-class-name="my-label">
				<el-tag size="medium" v-if="orderDetail.priority == '1'">是</el-tag>
				<el-tag v-else size="medium" type="info">否</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="是否生产" label-class-name="my-label">
				<el-tag v-if="orderDetail.produce == '1'" size="medium">是</el-tag>
				<el-tag v-else size="medium" type="info">否</el-tag>
			</el-descriptions-item>

			<el-descriptions-item label="创建时间" label-class-name="my-label">{{ orderDetail.createTime
				}}</el-descriptions-item>
			<el-descriptions-item label="订单状态" label-class-name="my-label">
				<el-tag size="medium" type="success" v-if="orderDetail.status == '90'">已完成</el-tag>
				<el-tag size="medium" type="info" v-if="orderDetail.status == '61'">待收货</el-tag>
				<el-tag size="medium" type="info" v-if="orderDetail.status == '62'">待取货</el-tag>
				<el-tag size="medium" type="warning" v-if="orderDetail.status == '71'">已收货</el-tag>
				<el-tag size="medium" type="warning" v-if="orderDetail.status == '72'">已取货</el-tag>
				<el-tag size="medium" v-if="orderDetail.status == '10'">待确认</el-tag>
				<el-tag size="medium" v-if="orderDetail.status == '20'">待排产</el-tag>
				<el-tag size="medium" type="danger" v-if="orderDetail.status == '30'">待生产</el-tag>
				<el-tag size="medium" type="danger" v-if="orderDetail.status == '40'">生产中</el-tag>
				<el-tag size="medium" type="danger" v-if="orderDetail.status == '50'">待发货</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="完成时间"
				label-class-name="my-label">{{ getOverTime(orderDetail) }}</el-descriptions-item>
		</el-descriptions>
		<div style="width: 100%;height: 10px"></div>
		<el-descriptions title="客户信息" :column="3" border>
			<el-descriptions-item label="客户 是否月结" label-class-name="my-label">
				<!-- <el-tag v-if="orderDetail.billMonth == '1'" size="medium">是</el-tag>
				<el-tag v-else size="medium" type="info">否</el-tag> -->
				<el-tag size="medium" >{{ orderDetail.billMonth }}</el-tag>

			</el-descriptions-item>
			<el-descriptions-item label="客户名字" label-class-name="my-label">{{ orderDetail.customerName
				}}</el-descriptions-item>
			<el-descriptions-item label="客户联系人" label-class-name="my-label">{{ orderDetail.customerPerson
				}}</el-descriptions-item>
			<el-descriptions-item label="客户联系电话" label-class-name="my-label">{{ orderDetail.customerPhone
				}}</el-descriptions-item>
			<el-descriptions-item label="客户 省/市/区">{{ orderDetail.customerProvince }}/{{ orderDetail.customerCity }}/{{
				orderDetail.customerCounty }}</el-descriptions-item>
			<el-descriptions-item label="客户 详细地址">{{ orderDetail.customerAddress }}</el-descriptions-item>
		</el-descriptions>

		<div style="width: 100%;height: 10px"></div>
		<el-descriptions title="收货信息" :column="3" border>
			<el-descriptions-item label="快递方式" label-class-name="my-label">{{ orderDetail.deliveryMode == 1 ? '物流发货' : '自提'
				}}</el-descriptions-item>
			<el-descriptions-item label="快递 联系人" label-class-name="my-label">{{ orderDetail.deliveryPerson
				}}</el-descriptions-item>
			<el-descriptions-item label="快递 联系电话" label-class-name="my-label">{{ orderDetail.deliveryPhone
				}}</el-descriptions-item>
			<el-descriptions-item label="快递 省/市/区">{{ orderDetail.deliveryProvince }}/{{ orderDetail.deliveryCity }}/{{
				orderDetail.deliveryCounty }}</el-descriptions-item>
			<!-- <el-descriptions-item label="快递 市">{{ orderDetail.deliveryCity }}</el-descriptions-item>
			<el-descriptions-item label="快递 区/县">{{ orderDetail.deliveryCounty }}</el-descriptions-item> -->
			<el-descriptions-item label="快递 详细地址">{{ orderDetail.deliveryAddress }}</el-descriptions-item>
			<el-descriptions-item label="快递 运输要求">{{ orderDetail.deliveryAsk }}</el-descriptions-item>
			<el-descriptions-item label="快递 发货备注">{{ orderDetail.deliveryRemark }}</el-descriptions-item>
		</el-descriptions>
		<div style="width: 100%;height: 10px"></div>
		<el-table :data="orderDetail.productList" :summary-method="getSummaries" show-summary>
			<el-table-column label="生产批次" prop="batchNumber" width="150" show-overflow-tooltip />
			<el-table-column label="产品名称" prop="productName" width="150" show-overflow-tooltip />
			<el-table-column label="最小起订量" prop="areasBoundary" width="90" />
			<el-table-column label="单价(元/㎡)" prop="price" width="90" />
			<el-table-column label="产品件数" prop="productCount" width="90" />
			<el-table-column label="客户提供框内尺寸(高mm)" prop="sizeHeight" width="100" />
			<el-table-column label="客户提供框内尺寸(宽mm)" prop="sizeWidth" width="100" />
			<el-table-column label="安装尺寸 (+mm)" prop="sizeAdd" width="80" />
			<el-table-column label="减尺尺寸高(-mm)" prop="sizeSubHeight" width="80" />
			<el-table-column label="减尺尺寸宽(-mm)" prop="sizeSubWidth" width="80" />
			<el-table-column label="安装尺寸(高mm)" prop="sizeHeightWx" width="80" />
			<el-table-column label="安装尺寸(宽mm)" prop="sizeWidthWx" width="80" />
			<el-table-column label="减尺后(高mm)" prop="sizeHeightSub" width="80">
				<template slot-scope="scope">
						<div class="notext" style="color: red;font-weight: bold;">
							{{scope.row.sizeHeightSub}}
						</div>
					</template>
			</el-table-column>
			<el-table-column label="减尺后(宽mm)" prop="sizeWidthSub" width="80">
				<template slot-scope="scope">
						<div class="notext" style="color: red;font-weight: bold;">
							{{scope.row.sizeWidthSub}}
						</div>
					</template>
			</el-table-column>
			<el-table-column label="小计㎡" prop="areasSellSum" width="80" />
			<el-table-column label="小计￥元" prop="totalAmount" width="80" />
			<el-table-column label="外框颜色" prop="color" width="80" />
			<el-table-column label="叶片颜色" prop="bladeColor" width="80" />
			<el-table-column label="叶片类型" prop="bladeType" width="80" />
			<el-table-column label="驱动方式" prop="driveMode" width="80" />
			<el-table-column label="玻璃数量" prop="glassCount" width="80" />
			<el-table-column label="生产备注" prop="remarkProd" width="100" show-overflow-tooltip />
			<el-table-column label="玻璃备注" prop="remarkGlass" width="100" show-overflow-tooltip />
			<el-table-column label="项目备注" prop="remark" width="100" show-overflow-tooltip />
		</el-table>
		<div style="width: 100%;height: 10px"></div>
		<el-descriptions title="订单备注" :column="1" border>
			<el-descriptions-item label="订单备注" label-class-name="my-label">{{ orderDetail.remark
				}}</el-descriptions-item>
			<el-descriptions-item label="订单备注" label-class-name="my-label" v-if="orderDetail.orderImgs">
				<div class="div" style="display: flex;flex-wrap: wrap;align-items: center;">
					<el-image style="width: 50px; height: 50px" :src="item"
						:preview-src-list="orderDetail.orderImgs.split(',')"
						v-for="(item, index) in orderDetail.orderImgs.split(',')" :key="index">
					</el-image>
				</div>

			</el-descriptions-item>
		</el-descriptions>
		<div style="width: 100%;height: 10px"></div>
		<!-- 型材切割
百叶制作
玻璃制作
成品组装
| 包装检验
 -->
		<h4>生产工序</h4>
		<table style="width: 100%;border: 1px solid #eee;" class="tablex">
			<tr>
				<th>型材切割</th>
				<th>百叶制作</th>
				<th>玻璃制作</th>
				<th>成品组装</th>
				<th>包装检验</th>
			</tr>
			<tr>
				<td>{{ orderDetail.stepStatus1 == 1 ? '已完成' : '未完成' }}</td>
				<td>{{ orderDetail.stepStatus2 == 1 ? '已完成' : '未完成' }}</td>
				<td>{{ orderDetail.stepStatus3 == 1 ? '已完成' : '未完成' }}</td>
				<td>{{ orderDetail.stepStatus4 == 1 ? '已完成' : '未完成' }}</td>
				<td>{{ orderDetail.stepStatus5 == 1 ? '已完成' : '未完成' }}</td>
			</tr>
			<tr>
				<td>{{ orderDetail.stepStatusTime1 || '-' }}</td>
				<td>{{ orderDetail.stepStatusTime2 || '-' }}</td>
				<td>{{ orderDetail.stepStatusTime3 || '-' }}</td>
				<td>{{ orderDetail.stepStatusTime4 || '-' }}</td>
				<td>{{ orderDetail.stepStatusTime5 || '-' }}</td>
			</tr>
		</table>


		<div style="width: 100%;height: 10px"></div>
		<el-descriptions title="物流信息" :column="3" border>
			<el-descriptions-item label="快递公司" v-if="orderDetail.deliveryMode == 1">{{ orderDetail.deliveryName
				}}</el-descriptions-item>
			<el-descriptions-item label="发货单号" v-if="orderDetail.deliveryMode == 1">{{ orderDetail.deliveryNumber
				}}</el-descriptions-item>
			<el-descriptions-item label="发货时间"
				v-if="orderDetail.deliveryMode == 1">{{ getDeliveryTime(orderDetail) }}</el-descriptions-item>
		</el-descriptions>
		<div style="width: 100%;height: 10px"></div>
		<el-descriptions title="操作人信息" :column="3" border>
			<el-descriptions-item label="客服">{{ getNames(orderDetail)[0] }}</el-descriptions-item>
			<el-descriptions-item label="排产">{{ getNames(orderDetail)[1] }}</el-descriptions-item>
			<el-descriptions-item label="物流">{{ getNames(orderDetail)[2] }}</el-descriptions-item>
			<!-- <el-descriptions-item label="生产小组">{{orderDetail.groupName}}</el-descriptions-item>
			<el-descriptions-item label="型材切割">{{getNames2(orderDetail)[0]}}</el-descriptions-item>
			<el-descriptions-item label="百叶制作">{{getNames2(orderDetail)[1]}}</el-descriptions-item>
			<el-descriptions-item label="玻璃制作">{{getNames2(orderDetail)[2]}}</el-descriptions-item>
			<el-descriptions-item label="成品组装">{{getNames2(orderDetail)[3]}}</el-descriptions-item>
			<el-descriptions-item label="包装检验">{{getNames2(orderDetail)[4]}}</el-descriptions-item> -->
		</el-descriptions>
	</div>
</template>

<script>
import {
	postOrdersInfo
} from '@/api/order/order'

export default {
	name: 'OrderDetail',
	data() {
		return {
			orderDetail: {},
		}
	},
	computed: {
		getNames2() {
			return (orderDetail) => {
				if (orderDetail && orderDetail.userGroup) {
					let step1 = JSON.parse(orderDetail.userGroup.step1).userName
					let step2 = JSON.parse(orderDetail.userGroup.step2).userName
					let step3 = JSON.parse(orderDetail.userGroup.step3).userName
					let step4 = JSON.parse(orderDetail.userGroup.step4).userName
					let step5 = JSON.parse(orderDetail.userGroup.step5).userName
					return [step1, step2, step3, step4, step5]
				} else {
					return ['-', '-', '-', '-']
				}

			}
		},
		getNames() {
			return (orderDetail) => {
				if (orderDetail && orderDetail.flowList && orderDetail.flowList.length > 0) {
					let list = orderDetail.flowList
					console.log(list, 'list')
					let list2 = []
					let findex1 = list.findIndex(item => item.orderStatus == '20') //确认
					let findex2 = list.findIndex(item => item.orderStatus == '30') //排产
					let findex3 = list.findIndex(item => item.orderStatus == '61' || item.orderStatus == '62') //物流
					list2[0] = findex1 == -1 ? '-' : list[findex1].createUserName
					list2[1] = findex2 == -1 ? '-' : list[findex2].createUserName
					list2[2] = findex3 == -1 ? '-' : list[findex3].createUserName
					return list2

				} else {
					return ['-', '-', '-']
				}
			}
		},

		getDeliveryTime() {
			return (orderDetail) => {
				// <!-- 待确认10 待排产20 待生产30 生产中40 待发货50 待收货61 待取货62 已收货 71已取货72 已完成90 -->
				if (orderDetail.status == '61' || orderDetail.status == '61' || orderDetail.status == '71' ||
					orderDetail.status == '72' || orderDetail.status == '90') {
					let findex = orderDetail.flowList.findIndex(item => item.orderStatus == '61')

					return findex == -1 ? '-' : orderDetail.flowList[findex].orderStatusTime
				} else {
					return '-'
				}
			}
		},
		getOverTime() {
			return (orderDetail) => {
				if (orderDetail.status == '90') {
					return orderDetail.flowList[orderDetail.flowList.length - 1].orderStatusTime
				} else {
					return '-'
				}
			}
		},
		getSize() {
			return (size) => {
				return parseInt(size + 30)
			}
		},
	},
	created() {
		
		const orderId = this.$route.params && this.$route.params.orderId
		if (orderId) {
			this.loading = true
			postOrdersInfo({ id: orderId }).then((result) => {
				console.log(result, '1111111111')
				this.orderDetail = result.data
				this.loading = false
			})
		}
	},
	methods: {
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				} else if (index === 4) {
					const values = data.reduce((prev, curr) => {
						const value3 = Number(curr.productCount);
						if (!isNaN(value3)) {
							return prev + value3;
						} else {
							return prev;
						}
					}, 0)
					sums[index] = values + '件'
				}
				else if (index === 14) {
					//共多少m2
					sums[index] = data.reduce((prev, curr) => {
						const value3 = Number(curr.areasSellSum);
						if (!isNaN(value3)) {
							return prev + value3;
						} else {
							return prev;
						}
					}, 0).toFixed(2);

				} else if (index === 15) {
					// sums[index] = '金额合计';
					sums[index] = data.reduce((prev, curr) => {
						const value3 = Number(curr.totalAmount);
					    console.log(prev,value3,'11111111',);
						if (!isNaN(value3)) {
							// return  Math.round(prev + value3)
							return prev + value3
						} else {
							// return Math.round(prev)
							return prev
						}
					}, 0).toFixed(0);
				} else {
					sums[index] = '-';
					return;
				}
			});
			return sums;
		},
	}
}
</script>

<style lang="scss" scoped>
.tablex {
	border-collapse: collapse;
	th {
		background-color: #f8f8f9;
		padding: 10px 5px;
		border: 1px solid #eee;
		color: #515a6e;
		font-size: 13px;
	}
	td {
		border: 1px solid #eee;
		text-align: center;
		padding: 5px;
		font-size: 14px;
		color: #606266;
	}
}
</style>